import React from 'react'
import './plan-card.css'
import wei_sou_chang from '../../../res/images/web/plan/wei_shou_cang.png'
import sou_chang from '../../../res/images/web/plan/shou_chang.png'
import moment from "moment";
import TeamAvatar from "../../game-room/components/Header/Versus/TeamAvatar/TeamAvatar";

import zhong_src from "../../../res/images/web/plan/中@2x.png"
import wei_zhong_src from "../../../res/images/web/plan/未中@2x.png"
import GameAIModel from "../../../model/GameAIModel";
import {formatDXQOdd} from "../../game-room/components/Main/index/BigSmallTable/BigSmallTable";


const PlanCard = props => {
    const game = props.game
    // Avatar: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/avatar/6651b5fa-1ae5-44a8-b37d-717dc6064357.jpg"
    // Createt: 1603340387
    // Goodat: null
    // Id: 3957801
    // Isdelete: 0
    // Kefen: 1
    // Kelogo: "c84767fc76b33511a0ad4120e8ba672c.png"
    // Kename: (3) ["河南建业", "河南建業", "Henan Jianye"]
    // Matchname: (3) ["中超", "中超", "CHN CSL"]
    // Name: "Retou22-平博"
    // Namiid: 3459612
    // Price: 0
    // Readnum: 5
    // Reason: "理由:**********************,我是:Retou22-平博"
    // Reasontitle: "Retou22-平博的分析标题"
    // Result: 1
    // Rightrate: 30
    // Rightratestr: "3/10"
    // Startballt: 1603442007
    // Startt: 1603438200
    // State: 8
    // Uid: "43b3b96c-04a9-4f48-bae9-e319144f04df"
    // Yuce: (3) [1.08, 0.5, 0.81]
    // Yucestyle: "asia"
    // Zannum: 0
    // Zhufen: 1
    // Zhulogo: "b499049c4410cbcc99800aaa2faaf3a6.png"
    // Zhuname: (3) ["武汉卓尔", "武漢卓爾", "Wuhan ZALL"]

    // const home = game.home_team
    // const away = game.away_team
    // const c = game.matchevent.name_zh
    const status = game.State
    const isStarted = status >= 2 && status <= 8
    const isEnd = status === 8
    const home = game.Zhuname[0]
    const away = game.Kename[0]
    const homeLogo = game.Zhulogo
    const awayLogo = game.Kelogo
    const homeScore = game.Zhufen
    const awayScore = game.Kefen
    const c = game.Matchname[0]
    const time = game.Startt ? moment(game.Startt * 1000).format('YYYY年MM月DD日 HH:mm') : ''
    // const zhong = plan.right
    const marked = props.marked
    const smallTextStyle = {
        width: '33%',
        fontSize: '12px',
    }
    // const yuceMapper = {
    //     // 让球=asia，大小球=bs，胜平负=eu
    //     'bs': {title: '大小球', data: formatDXQOdd(model.DXQ().oddsArr[1])},
    //     'asia': {title: '让球', data: model.RQ().pan},
    //     'eu': {title: '胜平负', data: model.SFP().oddsArr},
    // }
    //
    // const yuceType = yuceMapper[plan.yuceKey]
    // const yuceDetail = <p className='align-center-vertical-center' style={{color: '#FFA500',}}>
    //     {yuceType.data}
    // </p>
    // const yuce = <>
    //     <p>{yuceType.title}</p>
    //     {props.free || props.buy
    //         ? yuceDetail
    //         : game.State === 1
    //             ? <p className="align-center-vertical-center gray-text">购买后可查看</p>
    //             : <p className="align-center-vertical-center gray-text">-</p>
    //     }
    // </>
    const markIcon = <div style={{...smallTextStyle, textAlign: 'right', flex: 1,}}>
        <img src={marked ? sou_chang : wei_sou_chang} style={{width: 16, height: 16,}} alt=""/>
    </div>

    return <div className="pd-12 plan-game-card">
        <div className='flex-space-between-align-center mg-b-12px'>
            <span className='gray-text no-break' style={{...smallTextStyle, flex: 1,}}>{c}</span>
            {time && <span className='gray-text no-break' style={{...smallTextStyle, textAlign: 'center', flex: 1,}}>{time}</span>}

            {props.fromMyPlan ? <span style={{flex: 1,}}/> : markIcon}
        </div>
        <div className="flex-space-around-align-center mg-b-12px">
            <div className='flex-center-align-center flex-wrap-container' style={{width: '40%',}}>
                <TeamAvatar noPrefix={props.noPrefix} iconUrl={homeLogo} style={{width: 40, height: 40,}}/>
                <p className="mg-t-8px no-break" style={{width: '100%', textAlign: 'center',}}>{home}</p>
            </div>

            <div
                style={{
                    width: '20%',
                    fontSize: '22px',
                }}
                className="flex-center-align-center"
            >
                {isStarted ? <p>{homeScore} : {awayScore}</p> : <p>VS</p>}
            </div>

            <div className='flex-center-align-center flex-wrap-container' style={{width: '40%',}}>
                <TeamAvatar noPrefix={props.noPrefix} iconUrl={awayLogo} style={{width: 40, height: 40,}}/>
                <p className="mg-t-8px no-break" style={{width: '100%', textAlign: 'center',}}>{away}</p>
            </div>
        </div>
        {/*<div*/}
        {/*    className='pd-12'*/}
        {/*    style={{*/}
        {/*        background: 'rgba(51, 51, 51, 0.03)',*/}
        {/*        position: 'relative',*/}
        {/*        height: 44,*/}
        {/*        boxSizing: 'border-box',*/}
        {/*    }}*/}
        {/*>*/}
        {/*    {yuce}*/}
        {/*    {isEnd*/}
        {/*        ? props.free || props.buy*/}
        {/*            ? <img className='plan-game-card-zhong-icon' src={zhong ? zhong_src : wei_zhong_src} alt=""/>*/}
        {/*            : null*/}
        {/*        : null*/}
        {/*    }*/}
        {/*</div>*/}
    </div>
}

export default PlanCard